<template>
  <div class="app-container">
    <el-form :inline="true" class="search-wrap">
      <el-row :gutter="4">
        <el-col :span="6">
          <el-form-item label="关键词">
            <el-input v-model="q.keyWords" placeholder="关键词" @keyup.enter.native="load"/>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="运行状况">
            <el-select v-model="q.hasException" placeholder="运行状况">
              <el-option v-for="item in hasExceptionList" :key="item.value" :label="item.label" :value="item.value"/>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="执行时间">
            <el-date-picker
              v-model="executionTime"
              :picker-options="pickerOptions"
              :editable="false"
              unlink-panels
              type="datetimerange"
              start-placeholder="开始时间"
              end-placeholder="结束时间"
            ></el-date-picker>
          </el-form-item>
          <el-form-item>
            <el-button type="warning" icon="el-icon-search" @click="load">搜索</el-button>
            <el-button type="default" icon="el-icon-refresh" @click="resetSeach">重置</el-button>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <el-table :key="tableKey" v-loading="tableLoading" :data="items" border fit highlight-current-row style="width: 100%;" @sort-change="sortChange">
      <el-table-column :label="'情况'" width="60" align="center">
        <template slot-scope="scope">
          <el-badge v-if="!scope.row.exception" type="success" value="正常" :title="'正常'" class="item"></el-badge>
          <el-badge v-if="scope.row.exception" type="danger" value="异常" :title="'异常'" class="item"></el-badge>
        </template>
      </el-table-column>
      <el-table-column :label="'服务.方法'" min-width="150" align="center" show-overflow-tooltip>
        <template slot-scope="scope">
          <el-button title="点击查看详情" type="text" @click="showAuditLogDetailDialog(scope.row.id)">{{ scope.row.serviceName }}.{{ scope.row.methodName }}</el-button>
        </template>
      </el-table-column>
      <el-table-column :label="'执行持续时间'" prop="executionDuration" width="120" align="center"></el-table-column>
      <el-table-column :label="'方法执行时间'" prop="executionTime" sortable="custom" width="180" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.executionTime | parseTime("{y}-{m}-{d} {h}:{i}:{s}") }}</span>
        </template>
      </el-table-column>
      <el-table-column :label="'执行的用户名'" prop="nickName" width="150" align="center"></el-table-column>
      <el-table-column :label="'访问的IP地址'" prop="clientIpAddress" width="120" align="center"></el-table-column>
      <el-table-column :label="'访问的客户端'" prop="clientName" width="120" align="center"></el-table-column>
      <el-table-column :label="'访问的浏览器'" prop="browserInfo" width="350" align="center">
        <template slot-scope="scope">
          <el-tooltip class="item" effect="dark" :content="scope.row.browserInfo" placement="bottom-end">
            <span>{{ scope.row.browserInfo | slice(60) }}</span>
          </el-tooltip>
        </template>
      </el-table-column>
    </el-table>

    <pagination v-show="totalCount > 0" :total="totalCount" :page-index.sync="q.pageIndex" :page-size.sync="q.pageSize" @pagination="getList"/>

    <auditLog-detail-dialog ref="auditLogDetailDialog"></auditLog-detail-dialog>
  </div>
</template>

<script>
import { getAuditLogPagingList } from "@/api/auditLog";
import { pickerOptions } from "@/utils/helpers/datetime-picker-helper";
import Pagination from "@/components/Pagination";
import AuditLogDetailDialog from "./components/AuditLogDetailDialog";
import moment from "moment";

const hasExceptionList = [{ label: "全部", value: undefined }, { label: "异常", value: true }, { label: "正常", value: false }];

export default {
  name: "AuditLogsList",
  components: {
    pagination: Pagination,
    "auditLog-detail-dialog": AuditLogDetailDialog
  },
  filters: {
    slice: function(value, charLimit) {
      if (value && value.length > charLimit) {
        value = value.substring(0, charLimit) + "...";
      }
      return value;
    }
  },
  data() {
    return {
      pickerOptions,
      hasExceptionList,
      executionTime: [
        moment()
          .startOf("day")
          .toDate(),
        moment()
          .endOf("day")
          .toDate()
      ],
      q: {
        keyWords: undefined,
        executionTimeStart: undefined,
        executionTimeEnd: undefined,
        hasException: undefined,
        sorting: "id desc",
        pageIndex: 1,
        pageSize: 10
      },
      totalCount: 0,
      items: [],
      tableLoading: true,
      tableKey: 0
    };
  },
  created() {
    this.load();
  },
  methods: {
    resetSeach() {
      this.executionTime = [
        moment()
          .startOf("day")
          .toDate(),
        moment()
          .endOf("day")
          .toDate()
      ];
      this.q = {
        keyWords: undefined,
        executionTimeStart: undefined,
        executionTimeEnd: undefined,
        hasException: undefined,
        sorting: "id desc",
        pageIndex: 1,
        pageSize: 10
      };
      this.load();
    },
    load() {
      this.q.pageIndex = 1;
      this.q.executionTimeStart = this.executionTime[0];
      this.q.executionTimeEnd = this.executionTime[1];
      this.getList();
    },
    getList() {
      this.tableLoading = true;
      getAuditLogPagingList(this.q).then(result => {
        this.items = result.items;
        this.totalCount = result.totalCount;
        this.tableLoading = false;
      });
    },
    sortChange(sortData) {
      const { prop, order } = sortData;
      if (prop && order === "descending") {
        this.q.sorting = prop + " desc";
      } else if (prop && order === "ascending") {
        this.q.sorting = prop;
      } else {
        this.q.sorting = "id";
      }
      this.load();
    },
    showAuditLogDetailDialog(id) {
      this.$refs["auditLogDetailDialog"].show(id);
    }
  }
};
</script>

<style scope>
.item {
  margin-top: 10px;
}
</style>

